
                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
					<div class="row">
					    <div class="col-md-6 col-lg-3">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Basic Example</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Basic Progress bars-->
					                <!--===================================================-->
					                <div class="progress"><div style="width: 35%;" class="progress-bar progress-bar-primary"></div></div>
					                <div class="progress"><div style="width: 55%;" class="progress-bar progress-bar-warning"></div></div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-6 col-lg-3">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">With Label</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Progress bars with labels-->
					                <!--===================================================-->
					                <div class="progress"><div style="width: 75%;" class="progress-bar progress-bar-info">75%</div></div>
					                <div class="progress"><div style="width: 15%;" class="progress-bar progress-bar-success">15%</div></div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-6 col-lg-3">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Striped</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Striped Progress bars-->
					                <!--===================================================-->
					                <div class="progress progress-striped"><div style="width: 42%;" class="progress-bar progress-bar-purple"></div></div>
					                <div class="progress progress-striped"><div style="width: 50%;" class="progress-bar progress-bar-pink"></div></div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-6 col-lg-3">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Animated</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Progress bars with Animation-->
					                <!--===================================================-->
					                <div class="progress progress-striped active"><div style="width: 72%;" class="progress-bar progress-bar-dark"></div></div>
					                <div class="progress progress-striped active"><div style="width: 80%;" class="progress-bar progress-bar-danger"></div></div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					</div>
					<div class="row">
					    <div class="col-sm-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Sizes</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Extra Small-->
					                <!--===================================================-->
					                <p>Extra Small</p>
					                <div class="progress progress-xs"><div style="width: 75%;" class="progress-bar"></div></div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Small-->
					                <!--===================================================-->
					                <p>Small</p>
					                <div class="progress progress-sm"><div style="width: 95%;" class="progress-bar progress-bar-mint"></div></div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Medium-->
					                <!--===================================================-->
					                <p>Medium</p>
					                <div class="progress progress-md"><div style="width: 55%;" class="progress-bar progress-bar-purple"></div></div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Default-->
					                <!--===================================================-->
					                <p>Default</p>
					                <div class="progress"><div style="width: 15%;" class="progress-bar progress-bar-pink"></div></div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Large-->
					                <!--===================================================-->
					                <p>Large</p>
					                <div class="progress progress-lg"><div style="width: 45%;" class="progress-bar progress-bar-dark"></div></div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Extra Large-->
					                <!--===================================================-->
					                <p>Extra Large</p>
					                <div class="progress progress-xl"><div style="width: 45%;" class="progress-bar progress-bar-info"></div></div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-sm-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Colored</h3>
					            </div>
					            <div class="panel-body">
					                <div class="row">
					                    <div class="col-xs-6">
					
					                        <!--Default Progress bars-->
					                        <!--===================================================-->
					                        <div class="progress"><div style="width: 25%;" class="progress-bar"></div></div>
					                        <div class="progress"><div style="width: 35%;" class="progress-bar progress-bar-info"></div></div>
					                        <div class="progress"><div style="width: 15%;" class="progress-bar progress-bar-success"></div></div>
					                        <div class="progress"><div style="width: 55%;" class="progress-bar progress-bar-warning"></div></div>
					                        <div class="progress"><div style="width: 75%;" class="progress-bar progress-bar-danger"></div></div>
					                        <!--===================================================-->
					
					                    </div>
					                    <div class="col-xs-6">
					
					                        <!--Default Progress bars-->
					                        <!--===================================================-->
					                        <div class="progress"><div style="width: 75%;" class="progress-bar progress-bar-primary"></div></div>
					                        <div class="progress"><div style="width: 95%;" class="progress-bar progress-bar-mint"></div></div>
					                        <div class="progress"><div style="width: 55%;" class="progress-bar progress-bar-purple"></div></div>
					                        <div class="progress"><div style="width: 15%;" class="progress-bar progress-bar-pink"></div></div>
					                        <div class="progress"><div style="width: 45%;" class="progress-bar progress-bar-dark"></div></div>
					                        <!--===================================================-->
					
					                    </div>
					                </div>
					            </div>
					        </div>
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Stacked</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Stacked-->
					                <!--===================================================-->
					                <div class="progress">
					                    <div style="width: 35%" class="progress-bar progress-bar-success"></div>
					                    <div style="width: 20%" class="progress-bar progress-bar-warning progress-bar-striped"></div>
					                    <div style="width: 10%" class="progress-bar progress-bar-danger"></div>
					                </div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Stacked-->
					                <!--===================================================-->
					                <div class="progress">
					                    <div style="width: 15%" class="progress-bar progress-bar-primary"></div>
					                    <div style="width: 30%" class="progress-bar progress-bar-info"></div>
					                    <div style="width: 40%" class="progress-bar progress-bar-purple progress-bar-striped"></div>
					                </div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Stacked-->
					                <!--===================================================-->
					                <div class="progress">
					                    <div style="width: 30%" class="progress-bar progress-bar-pink progress-bar-striped"></div>
					                    <div style="width: 20%" class="progress-bar progress-bar-dark progress-bar-striped"></div>
					                    <div style="width: 30%" class="progress-bar progress-bar-danger progress-bar-striped"></div>
					                </div>
					                <!--===================================================-->
					
					                <br>
					
					                <!--Stacked-->
					                <!--===================================================-->
					                <div class="progress">
					                    <div style="width: 10%" class="progress-bar progress-bar-primary progress-bar-striped"></div>
					                    <div style="width: 15%" class="progress-bar progress-bar-success progress-bar-striped"></div>
					                    <div style="width: 20%" class="progress-bar progress-bar-danger progress-bar-striped"></div>
					                </div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					</div>
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->
